import { Component, OnInit } from '@angular/core';
import {HeroService} from '../hero.service'
import {Hero} from './class/hero'
import {MessageService} from '../message.service'
@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.scss']
})
export class HeroesComponent implements OnInit {
  // hero:Hero={
  //   id:1,
  //   name:'WindStorm'
  // };
  heroes:Hero[];
  // selectedHero:Hero;
  constructor(private heroService:HeroService,private messageService:MessageService) { 
    
  }
  getHeroes():void{
    // this.heroService.getHeros().subscribe(heroes=>this.heroes=heroes)
    this.heroService.getHeros().subscribe((heros)=>this.heroes=heros)
  }
  // onSelect(hero){
  //   // this.messageService.add(`${hero.id}-----${hero.name}`);
  //   this.selectedHero=hero;
  // }
  ngOnInit() {
    this.getHeroes();
  }
  add(name:string):void{
    name=name.trim();
    if(!name) return;
    this.heroService.addHero({name} as Hero)
    .subscribe(hero=>this.heroes.push(hero));
  }
  delete(hero:Hero):void{
    this.heroService.deleteHero(hero).subscribe();
    this.heroes=this.heroes.filter(item=>item!==hero);
  }

}
